<template>
  <div class="boxs">
    <div class="f1">
      <ul>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/kuajing/组172.png" alt="" />
            <img class="icon2" src="@/assets/kuajing/组175.png" alt="" />
          </div>
          <span style="color: #627dca">填写申请信息</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/kuajing/组173.png" alt="" />
          </div>
          <span>补充申请资料</span>
        </li>
      </ul>
    </div>

    <div class="f2">
      <!-- <div class="unit"><p>单位：元</p></div> -->
      <ul class="ul">
        <li>
          <el-form :model="form" label-width="320px" :rules="rules">
            <el-form-item label="企业实际控制人姓名" prop="a">
              <el-input v-model="form.a" @blur="a"></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="320px" :rules="rules">
            <el-form-item label="企业上年度销售收入金额" prop="b">
              <el-input
                v-model="addform.b"
                @focus="
                  () => {
                    this.addform.b = remoney(this.addform.b)
                  }
                "
                @input="limitInput($event, 'b')"
                @blur="b"
              ></el-input>
              <p style="position: absolute; right: 15px; top: 0px; z-index: 99; font-size: 16px">
                元
              </p>
              <p class="message" v-if="b1">格式错误，请重新输入</p>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form :model="form" label-width="320px" :rules="rules">
            <el-form-item label="企业实际控制人身份证号" prop="c">
              <el-input type="string" @blur="c" v-model="form.c" />
              <p class="message" v-if="c1">格式错误，请重新输入</p>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="320px" :rules="rules">
            <el-form-item label="企业上年度缴纳增值税金额" prop="d">
              <el-input
                v-model="addform.d"
                @focus="
                  () => {
                    this.addform.d = remoney(this.addform.d)
                  }
                "
                @input="limitInput($event, 'd')"
                @blur="d"
              ></el-input>
              <p style="position: absolute; right: 15px; top: 0px; z-index: 99; font-size: 16px">
                元
              </p>
              <p class="message" v-if="d1">格式错误，请重新输入</p>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form :model="form" label-width="320px" :rules="rules">
            <el-form-item label="企业实际控制人手机号" prop="e">
              <el-input v-model="form.e" @blur="e"></el-input>
              <p class="message" v-if="e1">格式错误，请重新输入</p>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="320px" :rules="rules">
            <el-form-item label="企业上上年度销售收入金额" prop="f">
              <el-input
                v-model="addform.f"
                @focus="
                  () => {
                    this.addform.f = remoney(this.addform.f)
                  }
                "
                @input="limitInput($event, 'f')"
                @blur="f"
              ></el-input>
              <p style="position: absolute; right: 15px; top: 0px; z-index: 99; font-size: 16px">
                元
              </p>
              <p class="message" v-if="f1">格式错误，请重新输入</p>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form :model="form" label-width="320px" :rules="rules">
            <el-form-item label="经办人姓名" prop="g">
              <el-input v-model="form.g" @blur="g"></el-input>
            </el-form-item>
          </el-form>

          <el-form :model="form" label-width="320px" :rules="rules">
            <el-form-item label="企业上上年度缴纳增值税金额" prop="h">
              <el-input
                v-model="addform.h"
                @focus="
                  () => {
                    this.addform.h = remoney(this.addform.h)
                  }
                "
                @input="limitInput($event, 'h')"
                @blur="h"
              ></el-input>
              <p style="position: absolute; right: 15px; top: 0px; z-index: 99; font-size: 16px">
                元
              </p>
              <p class="message" v-if="b1">格式错误，请重新输入</p>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form :model="form" label-width="320px" :rules="rules">
            <el-form-item label="经办人身份证号" prop="i">
              <el-input type="string" @blur="i" v-model="form.i" />
              <p class="message" v-if="i1">格式错误，请重新输入</p>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="320px" :rules="rules">
            <el-form-item label="当期财报年份" prop="j">
              <el-select @change="j" v-model="form.j">
                <el-option key="99" label="请选择" value=""></el-option>
                <el-option key="1" label="2022" value="2022"></el-option>
                <el-option key="2" label="2023" value="2023"></el-option>
                <el-option key="3" label="2024" value="2024"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form :model="form" label-width="320px" :rules="rules">
            <el-form-item label="经办人手机号" prop="k">
              <el-input v-model="form.k" @blur="k"></el-input>
              <p class="message" v-if="k1">格式错误，请重新输入</p>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="320px" :rules="rules">
            <el-form-item label="企业当期年度资产合计" prop="l">
              <el-input
                v-model="addform.l"
                @focus="
                  () => {
                    this.addform.l = remoney(this.addform.l)
                  }
                "
                @input="limitInput($event, 'l')"
                @blur="l"
              ></el-input>
              <p style="position: absolute; right: 15px; top: 0px; z-index: 99; font-size: 16px">
                元
              </p>
              <p class="message" v-if="f1">格式错误，请重新输入</p>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form :model="form" label-width="320px" :rules="rules">
            <el-form-item label="退税专用账号" prop="m">
              <el-input v-model="form.m" @blur="m"></el-input>
              <p class="message" v-if="m1">格式错误，请重新输入</p>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="320px" :rules="rules">
            <el-form-item label="企业上期年度资产合计" prop="n">
              <el-input
                v-model="addform.n"
                @focus="
                  () => {
                    this.addform.n = remoney(this.addform.n)
                  }
                "
                @input="limitInput($event, 'n')"
                @blur="n"
              ></el-input>
              <p style="position: absolute; right: 15px; top: 0px; z-index: 99; font-size: 16px">
                元
              </p>
              <p class="message" v-if="h1">格式错误，请重新输入</p>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form :model="form" label-width="320px" :rules="rules">
            <el-form-item label="退税账户开户行" prop="o">
              <el-input v-model="form.o" @blur="o"></el-input>
              <p class="message" v-if="o1">格式错误，请重新输入</p>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="320px" :rules="rules">
            <el-form-item label="企业当期年报营业收入" prop="p">
              <el-input
                v-model="addform.p"
                @focus="
                  () => {
                    this.addform.p = remoney(this.addform.p)
                  }
                "
                @input="limitInput($event, 'p')"
                @blur="p"
              ></el-input>
              <p style="position: absolute; right: 15px; top: 0px; z-index: 99; font-size: 16px">
                元
              </p>
              <p class="message" v-if="p1">格式错误，请重新输入</p>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form :model="form" label-width="320px" :rules="rules">
            <el-form-item label="企业本年度累计销售收入金额" prop="q">
              <el-input
                v-model="addform.q"
                @focus="
                  () => {
                    this.addform.q = remoney(this.addform.q)
                  }
                "
                @input="limitInput($event, 'q')"
                @blur="q"
              ></el-input>
              <p style="position: absolute; right: 15px; top: 0px; z-index: 99; font-size: 16px">
                元
              </p>
              <p class="message" v-if="q1">格式错误，请重新输入</p>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="320px" :rules="rules">
            <el-form-item label=" 企业上期年报营业收入" prop="r">
              <el-input
                v-model="addform.r"
                @focus="
                  () => {
                    this.addform.r = remoney(this.addform.r)
                  }
                "
                @input="limitInput($event, 'r')"
                @blur="r"
              ></el-input>
              <p style="position: absolute; right: 15px; top: 0px; z-index: 99; font-size: 16px">
                元
              </p>
              <p class="message" v-if="l1">格式错误，请重新输入</p>
            </el-form-item>
          </el-form>
        </li>
        <!-- style="justify-content: left" -->
        <li>
          <el-form :model="form" label-width="1.5625rem" :rules="rules" style="margin-left: 62px">
            <el-form-item label="企业本年度累计缴纳增值税金额" prop="s">
              <el-input
                v-model="addform.s"
                @focus="
                  () => {
                    this.addform.s = remoney(this.addform.s)
                  }
                "
                @input="limitInput($event, 's')"
                @blur="s"
              ></el-input>
              <p style="position: absolute; right: 15px; top: 0px; z-index: 99; font-size: 16px">
                元
              </p>
              <p class="message" v-if="q1">格式错误，请重新输入</p>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="1.5625rem" :rules="rules" style="margin-left: 62px">
            <el-form-item label=" " prop="">
              <el-input style="visibility: hidden"></el-input>
            </el-form-item>
          </el-form>
        </li>
      </ul>

      <div class="submit">
        <button
          class="btn btn3"
          v-bind:class="{ active: btn, actives: submitMessage == '提交中' }"
          @click="goNextFlow()"
        >
          {{ submitMessage }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { myPostFetch, findupdateKJApply, updateKJApplySXB } from '@/utils'
export default {
  data() {
    return {
      submitMessage: '下一步',
      isLock: false,
      QYSQreportUrl: '',
      JSFWreportUrl: '',
      activeName: 'first', //标签页默认
      showAgreementVisible: false, //协议弹框:
      hintVisible: false,
      disabled: false,
      officertel: '',
      loading: true,
      radio: false, //企业授权服务状态变量
      btn: false, //提交按钮是否可用状态变量
      procedureId: '', // 从路由地址中获取产品ID,保存到状态变量中
      productcode: '',
      ProductList: null,
      sxb: [],
      index: '',
      id: '',
      apply: null,
      kjApplyInfo: null,
      b1: false,
      c1: false,
      d1: false,
      e1: false,
      f1: false,
      g1: false,
      h1: false,
      i1: false,
      j1: false,
      k1: false,
      l1: false,
      m1: false,
      n1: false,
      o1: false,
      p1: false,
      q1: false,
      r1: false,
      s1: false,
      verify: {
        b: false,
        d: false,
        l: false,
        n: false
      },

      form: {
        a: '',
        b: '',
        c: '',
        d: '',
        e: '',
        f: '',
        g: '',
        h: '',
        i: '',
        j: '',
        k: '',
        l: '',
        m: '',
        n: '',
        o: '',
        p: '',
        q: '',
        r: '',
        s: '',
        productname: '',
        productid: '',
        productcode: ''
      },
      // 用户填写资料表格
      addform: {
        a: '',
        b: '',
        c: '',
        d: '',
        e: '',
        f: '',
        g: '',
        h: '',
        i: '',
        j: '',
        k: '',
        l: '',
        m: '',
        n: '',
        o: '',
        p: '',
        q: '',
        r: '',
        s: ''
      },
      // 表单验证
      rules: {
        a: [{ required: true, message: ' ', trigger: 'blur' }],
        b: [{ required: true, message: ' ', trigger: 'blur' }],
        c: [{ required: true, message: ' ', trigger: 'blur' }],
        d: [{ required: true, message: ' ', trigger: 'blur' }],
        e: [{ required: true, message: ' ', trigger: 'blur' }],
        f: [{ required: true, message: ' ', trigger: 'blur' }],
        g: [{ required: true, message: ' ', trigger: 'blur' }],
        h: [{ required: true, message: ' ', trigger: 'blur' }],
        i: [{ required: true, message: ' ', trigger: 'blur' }],
        j: [{ required: true, message: ' ', trigger: 'blur' }],
        k: [{ required: true, message: ' ', trigger: 'blur' }],
        l: [{ required: true, message: ' ', trigger: 'blur' }],
        m: [{ required: true, message: ' ', trigger: 'blur' }],
        n: [{ required: true, message: ' ', trigger: 'blur' }],
        o: [{ required: true, message: ' ', trigger: 'blur' }],
        p: [{ required: true, message: ' ', trigger: 'blur' }],
        q: [{ required: true, message: ' ', trigger: 'blur' }],
        r: [{ required: true, message: ' ', trigger: 'blur' }],
        s: [{ required: true, message: ' ', trigger: 'blur' }]
      }
    }
  },
  // 生命周期方法
  mounted() {
    // 从路由地址中获取产品ID,保存到状态变量中
    this.form.productid = localStorage.getItem('id')
    this.productcode = localStorage.getItem('productcode')
    this.$route.query.applyid ? (this.id = this.$route.query.applyid) : (this.id = '')
    this.findupdateKJApply()
    this.submitBtn()
    this.getFindproduct()
  },
  methods: {
    // 获取最上端产品列表
    async getFindproduct() {
      let url = '/api/BusinessSPs/findproduct'
      let params = {
        productcode: this.productcode
      }
      let data = await myPostFetch(url, params)
      this.ProductList = data.data
    },
    // 表单
    a() {
      this.submitBtns()
    },
    b(e) {
      this.b1 = false
      this.form.b = this.addform.b
      //获取输入的数据，若不写这行，数据可能输不进去
      this.addform.b = e.target.value

      //将用户输入的数据，自动转换为带千分符的
      this.addform.b = this.fmoney(this.addform.b)

      let value = Number(this.form.b)
      this.submitBtns()
      if (this.form.b == '') return
      this.form.b = value.toFixed(2)
      if (isNaN(this.form.b)) {
        this.form.b = ''
        this.b1 = true
      }
      this.verify.b = true
    },
    c() {
      this.c1 = false
      this.submitBtns()
      if (this.form.c == '') return
      let reg =
        /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      if (!reg.test(this.form.c)) {
        this.form.c = ''
        this.c1 = true
      }
    },
    d(e) {
      this.d1 = false
      this.form.d = this.addform.d
      //获取输入的数据，若不写这行，数据可能输不进去
      this.addform.d = e.target.value
      //将用户输入的数据，自动转换为带千分符的
      this.addform.d = this.fmoney(this.addform.d)

      let value = Number(this.form.d)
      this.submitBtns()
      if (this.form.d == '') return
      this.form.d = value.toFixed(2)
      if (isNaN(this.form.d)) {
        this.form.d = ''
        this.d1 = true
      }
      this.verify.d = true
    },
    e() {
      this.e1 = false
      let value = Number(this.form.e)
      this.submitBtns()
      if (this.form.e == '') return
      this.form.e = value.toFixed(0)
      let reg = /^1[3-9]\d{9}$/
      if (!reg.test(this.form.e)) {
        this.form.e = ''
        this.e1 = true
      }

      if (isNaN(this.form.e)) {
        this.form.e = ''
        this.e1 = true
      }
    },
    f(e) {
      this.f1 = false
      this.form.f = this.addform.f
      //获取输入的数据，若不写这行，数据可能输不进去
      this.addform.f = e.target.value
      //将用户输入的数据，自动转换为带千分符的
      this.addform.f = this.fmoney(this.addform.f)
      let value = Number(this.form.f)
      this.submitBtns()
      if (this.form.f == '') return
      this.form.f = value.toFixed(2)
      if (isNaN(this.form.f)) {
        this.form.f = ''
        this.f1 = true
      }
    },
    g() {
      this.submitBtns()
    },
    h(e) {
      this.h1 = false
      this.form.h = this.addform.h
      //获取输入的数据，若不写这行，数据可能输不进去
      this.addform.h = e.target.value
      //将用户输入的数据，自动转换为带千分符的
      this.addform.h = this.fmoney(this.addform.h)
      let value = Number(this.form.h)
      this.submitBtns()
      if (this.form.h == '') return
      this.form.h = value.toFixed(2)
      if (isNaN(this.form.h)) {
        this.form.h = ''
        this.h1 = true
      }
    },
    i() {
      this.i1 = false
      this.submitBtns()
      if (this.form.i == '') return
      let reg =
        /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      if (!reg.test(this.form.i)) {
        this.form.i = ''
        this.i1 = true
      }
    },
    j() {
      this.submitBtns()
    },
    k() {
      this.k1 = false
      let value = Number(this.form.k)
      this.submitBtns()
      if (this.form.k == '') return
      this.form.k = value.toFixed(0)
      let reg = /^1[3-9]\d{9}$/
      if (!reg.test(this.form.k)) {
        this.form.k = ''
        this.k1 = true
      }

      if (isNaN(this.form.e)) {
        this.form.e = ''
        this.e1 = true
      }
    },
    l(e) {
      this.l1 = false
      this.form.l = this.addform.l
      //获取输入的数据，若不写这行，数据可能输不进去
      this.addform.l = e.target.value
      //将用户输入的数据，自动转换为带千分符的
      this.addform.l = this.fmoney(this.addform.l)

      let value = Number(this.form.l)
      this.submitBtns()
      if (this.form.l == '') return
      this.form.l = value.toFixed(2)
      if (isNaN(this.form.l)) {
        this.form.l = ''
        this.l1 = true
      }
      this.verify.l = true
    },
    m() {
      this.m1 = false
      let value = Number(this.form.m)
      this.submitBtns()
      if (this.form.m == '') return
      this.form.m = value.toFixed(0)
      if (isNaN(this.form.m)) {
        this.form.m = ''
        this.m1 = true
      }
    },
    n(e) {
      this.n1 = false
      this.form.n = this.addform.n
      this.addform.n = e.target.value

      this.addform.n = this.fmoney(this.addform.n)

      let value = Number(this.form.n)
      this.submitBtns()
      if (this.form.n == '') return
      this.form.n = value.toFixed(2)
      if (isNaN(this.form.n)) {
        this.form.n = ''
        this.n1 = true
      }
      this.verify.n = true
    },
    o() {
      this.submitBtns()
    },
    p(e) {
      this.p1 = false
      this.form.p = this.addform.p

      this.addform.p = e.target.value

      this.addform.p = this.fmoney(this.addform.p)

      let value = Number(this.form.p)
      this.submitBtns()
      if (this.form.p == '') return
      this.form.p = value.toFixed(2)
      if (isNaN(this.form.p)) {
        this.form.p = ''
        this.p1 = true
      }
    },
    q(e) {
      this.r1 = false
      this.form.q = this.addform.q

      this.addform.q = e.target.value

      this.addform.q = this.fmoney(this.addform.q)

      let value = Number(this.form.q)
      this.submitBtns()
      if (this.form.q == '') return
      this.form.q = value.toFixed(2)
      if (isNaN(this.form.q)) {
        this.form.q = ''
        this.q1 = true
      }
    },
    r(e) {
      this.r1 = false
      this.form.r = this.addform.r
      this.addform.r = e.target.value
      this.addform.r = this.fmoney(this.addform.r)
      let value = Number(this.form.r)
      this.submitBtns()
      if (this.form.r == '') return
      this.form.r = value.toFixed(2)
      if (isNaN(this.form.r)) {
        this.form.r = ''
        this.r1 = true
      }
    },
    s(e) {
      this.s1 = false
      this.form.s = this.addform.s

      this.addform.s = e.target.value

      this.addform.s = this.fmoney(this.addform.s)

      let value = Number(this.form.s)
      this.submitBtns()
      if (this.form.s == '') return
      this.form.s = value.toFixed(2)
      if (isNaN(this.form.s)) {
        this.form.s = ''
        this.s1 = true
      }
    },
    // 表单格式转换
    // 票面金额
    limitInput(value, name) {
      this.addform[name] =
        ('' + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || ''
    },
    //千分位格式化：10000转为10,000.00
    fmoney(s, n) {
      if (s === '' || s == null || (s == undefined) | isNaN(Number(s))) {
        return s
      }
      s = Number(s) ? Number(s) : s
      n = (n || n == 0) && n > -1 && n <= 20 ? n : 2
      s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + ''
      var l = s.split('.')[0].split('').reverse()
      var r = s.split('.')[1]
      var t = ''
      for (var i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? ',' : '')
      }
      if (n > 0) {
        r = '.' + r
      } else if (n == 0) {
        r = ''
      }
      let returnT = t.split('').reverse().join('') + r
      //负数处理
      if (returnT[0] == '-' && returnT[1] == ',') {
        returnT = '-' + returnT.substring(2)
      }
      return returnT
    },
    //千分位反格式化:10,000.00转为10000.00
    remoney(s) {
      let str = ''
      if (s) {
        str = String(s).replace(/,/g, '')
      }
      if (s && (s + '').indexOf('.') > -1 && Number(str)) {
        return String(s).replace(/[^\d\.-]/g, '')
      } else if (s && Number(str)) {
        return str
      } else {
        return s
      }
    },
    // 确认授信回显
    async findupdateKJApply() {
      if (!this.id) {
        this.form.productname = '税信保'
        return
      }
      let { data } = await findupdateKJApply(this.id)
      let kjApplyInfo = data.kjApplyInfo
      this.kjApplyInfo = kjApplyInfo
      if (kjApplyInfo) {
        this.form.a = kjApplyInfo.entcontrollerneme
        this.addform.b = kjApplyInfo.lastamount
        this.form.c = kjApplyInfo.certid
        this.addform.d = kjApplyInfo.lastvatamount
        this.form.e = kjApplyInfo.entcontrollephone
        this.form.j = kjApplyInfo.particularyear
        this.addform.l = kjApplyInfo.currentasset
        this.form.m = kjApplyInfo.drawbackaccount
        this.addform.n = kjApplyInfo.periodasset
        this.form.o = kjApplyInfo.drawbackopening
      }
      this.form.productname = data.businessApply.productname
      this.form.productid = data.businessApply.productid
      this.form.productcode = data.businessApply.productcode
      this.addform.b = this.fmoney(this.addform.b)
      this.form.b = this.remoney(this.addform.b)
      this.addform.d = this.fmoney(this.addform.d)
      this.form.d = this.remoney(this.addform.d)
      this.addform.l = this.fmoney(this.addform.l)
      this.form.l = this.remoney(this.addform.l)
      this.addform.n = this.fmoney(this.addform.n)
      this.form.n = this.remoney(this.addform.n)
    },
    // 确认授信第1步
    async goNextFlow() {
      if (this.submitMessage == '提交中') return
      if (
        this.btn &&
        this.form.a !== '' &&
        this.addform.b !== '' &&
        this.form.c !== '' &&
        this.addform.d !== '' &&
        this.form.e !== '' &&
        this.addform.f !== '' &&
        this.form.g !== '' &&
        this.addform.h !== '' &&
        this.form.i !== '' &&
        this.form.j !== '' &&
        this.form.k !== '' &&
        this.addform.l !== '' &&
        this.form.m !== '' &&
        this.addform.n !== '' &&
        this.form.o !== '' &&
        this.addform.p !== '' &&
        this.addform.q !== '' &&
        this.addform.r !== '' &&
        this.addform.s !== ''
      ) {
        this.submitMessage = '提交中'
        let form = {
          entcontrollerneme: this.form.a,
          lastamount: this.form.b,
          certid: this.form.c,
          lastvatamount: this.form.d,
          entcontrollephone: this.form.e,
          lastlastamount: this.form.f,
          agentname: this.form.g,
          lastlastvatamount: this.form.h,
          agentid: this.form.i,
          particularyear: this.form.j,
          agentphone: this.form.k,
          currentasset: this.form.l,
          drawbackaccount: this.form.m,
          periodasset: this.form.n,
          drawbackopening: this.form.o,
          currentoperatingreceipt: this.form.p,
          currenamount: this.form.q,
          lastoperatingreceipt: this.form.r,
          currentvatamount: this.form.s,
          productname: this.form.productname,
          productid: this.form.productid,
          productcood: this.productcode,
          applyid: this.id
        }
        let data = await updateKJApplySXB(form)
        let applyid = ''
        this.id ? (applyid = this.kjApplyInfo.applyid) : (applyid = '')
        if (data.msg == 'ok') {
          this.$Message.success('申请提交成功')
          this.$router.push(
            `/sxbCreditExtension2?applyid=${data.data.applyid}&productcode=${this.productcode}&id=6269952023805952&newApplyid=${applyid}`
          )
          setTimeout(() => {
            this.submitMessage = '下一步'
          }, 3000)
        } else {
          this.$Message.error('提交失败，请检查申请信息')
          this.submitMessage = '下一步'
        }
      }
    },
    submitBtn() {
      if (
        this.form.a !== '' &&
        this.addform.b !== '' &&
        this.form.c !== '' &&
        this.addform.d !== '' &&
        this.form.e !== '' &&
        this.addform.f !== '' &&
        this.form.g !== '' &&
        this.addform.h !== '' &&
        this.form.i !== '' &&
        this.form.j !== '' &&
        this.form.k !== '' &&
        this.addform.l !== '' &&
        this.form.m !== '' &&
        this.addform.n !== '' &&
        this.form.o !== '' &&
        this.addform.p !== '' &&
        this.addform.q !== '' &&
        this.addform.r !== '' &&
        this.addform.s !== ''
      ) {
        this.btn = true
      } else {
        this.btn = false
      }
    },
    submitBtns() {
      if (
        this.form.a !== '' &&
        this.addform.b !== '' &&
        this.form.c !== '' &&
        this.addform.d !== '' &&
        this.form.e !== '' &&
        this.addform.f !== '' &&
        this.form.g !== '' &&
        this.addform.h !== '' &&
        this.form.i !== '' &&
        this.form.j !== '' &&
        this.form.k !== '' &&
        this.addform.l !== '' &&
        this.form.m !== '' &&
        this.addform.n !== '' &&
        this.form.o !== '' &&
        this.addform.p !== '' &&
        this.addform.q !== '' &&
        this.addform.r !== '' &&
        this.addform.s !== ''
      ) {
        this.btn = true
      } else {
        this.btn = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.boxs {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: #fff;
  .f1 {
    margin-top: 20px;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        height: 40px;
        .icon {
          .icon1 {
            width: 0.2083rem;
          }
          .icon2 {
            height: 2px;
            margin: 0 16px;
          }
        }
        span {
          font-size: 0.1042rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999;
          margin-left: -0.2188rem;
          margin-top: 3px;
        }
      }
    }
  }
  .unit {
    position: relative;
    width: 90%;
    height: 20px;
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #b3b3b3;
    font-size: 14px;
    color: #606266;
    p {
      position: absolute;
      @media only screen and (min-width: 1580px) and (max-width: 1950px) {
        right: 15.1%;
      }
      right: 5.5%;
      top: -3px;
    }
  }
  .f2 {
    // height: 240px;
    overflow: auto;
    // @media only screen and (min-width: 1580px) and (max-width: 1950px) {
    //   height: 390px;
    // }
    margin-top: 5%;
    width: 100%;
    ul {
      display: flex;
      flex-direction: column;
      justify-content: center;
      li {
        position: relative;
        width: 90%;
        margin-bottom: 18px;
        height: 50px;
        display: flex;
        justify-content: center;
        .message {
          margin-top: -11px;
          font-size: 12px;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #ef2d46;
        }
      }
    }
  }

  .f3 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 55px;
    @media only screen and (min-width: 1580px) and (max-width: 1950px) {
      bottom: 70px;
    }
    width: 275px;
    height: 34px;
    background: #48a0b8;
    border-radius: 4px;
    font-size: 18px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
  }
  // 服务协议
  .agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 25px;
    text-align: center;
    margin-top: 10px;
    user-select: none;
    span {
      font-size: 14px;
      color: #666;
      margin-left: 7px;
    }
    img {
      width: 15px;
      height: 15px;
      cursor: pointer;
    }
    a {
      cursor: pointer;
      font-size: 14px;
      color: #48a0b8;
    }
  }
  // 按钮组
  .submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    margin: 5px 0 5px 0;
    cursor: pointer;
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 180px;
      height: 34px;
      background: #63c3dd;
      border-radius: 4px;
      font-size: 18px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #ffffff;
      margin-right: 30px;
    }
    .btn1 {
      background-color: #bfbfbf;
    }
    // 提交按钮
    .btn3 {
      background-color: #ccc;
      &.active {
        background-color: #3f6ef2;
      }
      &.actives {
        background-color: rgba(10, 123, 224, 0.6);
      }
    }
  }
}
/* 输入框样式  */
::v-deep .el-input__inner {
  box-sizing: border-box;
  width: 300px;
  @media only screen and (min-width: 1px) and (max-width: 910px) {
    width: 100px;
  }
  @media only screen and (min-width: 911px) and (max-width: 999px) {
    width: 150px;
  }
  @media only screen and (min-width: 1000px) and (max-width: 1150px) {
    width: 200px;
  }
  @media only screen and (min-width: 1151px) and (max-width: 1550px) {
    width: 250px;
  }
  height: 39px;
  font-size: 14px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
  line-height: 35px !important;
}
::v-deep .el-form-item__label {
  font-size: 0.0885rem;
  font-weight: 400;
  color: #1f1f20;
}
::v-deep .el-form-item__label {
  @media only screen and (min-width: 1000px) and (max-width: 1090px) {
    width: 280px !important;
  }
  @media only screen and (min-width: 1090px) and (max-width: 1150px) {
    width: 280px !important;
  }
  @media only screen and (min-width: 1150px) and (max-width: 1250px) {
    width: 260px !important;
  }
  @media only screen and (min-width: 1250px) and (max-width: 1300px) {
    width: 310px !important;
  }
  @media only screen and (min-width: 1300px) and (max-width: 1390px) {
    width: 310px !important;
  }
  @media only screen and (min-width: 1390px) and (max-width: 1475px) {
    width: 350px !important;
  }
  @media only screen and (min-width: 1475px) and (max-width: 1575px) {
    width: 350px !important;
  }
  @media only screen and (min-width: 1575px) and (max-width: 1675px) {
    width: 310px !important;
  }
  @media only screen and (min-width: 1675px) and (max-width: 1775px) {
    width: 310px !important;
  }
  @media only screen and (min-width: 1775px) and (max-width: 1875px) {
    width: 380px !important;
  }
  @media only screen and (min-width: 1875px) and (max-width: 2580px) {
    width: 380px !important;
  }
}
::v-deep .el-form-item__content {
  @media only screen and (min-width: 1000px) and (max-width: 1090px) {
    margin-left: 280px !important;
  }
  @media only screen and (min-width: 1090px) and (max-width: 1150px) {
    margin-left: 280px !important;
  }
  @media only screen and (min-width: 1150px) and (max-width: 1250px) {
    margin-left: 260px !important;
  }
  @media only screen and (min-width: 1250px) and (max-width: 1300px) {
    margin-left: 310px !important;
  }
  @media only screen and (min-width: 1300px) and (max-width: 1390px) {
    margin-left: 310px !important;
  }
  @media only screen and (min-width: 1390px) and (max-width: 1475px) {
    margin-left: 350px !important;
  }
  @media only screen and (min-width: 1475px) and (max-width: 1575px) {
    margin-left: 350px !important;
  }
  @media only screen and (min-width: 1575px) and (max-width: 1675px) {
    margin-left: 310px !important;
  }
  @media only screen and (min-width: 1675px) and (max-width: 1775px) {
    margin-left: 310px !important;
  }
  @media only screen and (min-width: 1775px) and (max-width: 1875px) {
    margin-left: 380px !important;
  }
  @media only screen and (min-width: 1875px) and (max-width: 2580px) {
    margin-left: 380px !important;
  }
}
</style>
